<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="../templates/principal.xhtml">

    <ui:define name="content" id="content">
        <h1 class="title ui-widget-header ui-corner-all">Bem Vindo ao Cadastro de D.D.D.</h1>

        <h:form id="frmDdd">


            <p:dataTable id="tabDdd" widgetVar="wtabDdd" var="codigoDdd" value="#{codigoDddBean.lazyModel}" 
                         paginator="true" rows="10" lazy="true" rowSelectListener="#{codigoDddBean.onRowSelectDDD}"
                         rowStyleClass="#{empty rowIndex or rowIndex mod 2 ne 0 ? 'even-row' : ''}" rowIndexVar="rowIndex"
                         selection="#{codigoDddBean.selectedCodigoDdd}" selectionMode="single"
                         onRowSelectComplete="codigoDddDialog.show()" onRowSelectUpdate="panel,display">

                <f:facet name="header">
                    Selecione uma linha e clique para Manutenção
                </f:facet>

                <p:column headerText="D.D.D." sortBy="#{codigoDdd.codigo}" filterBy="#{codigoDdd.codigo}">
                    <h:outputText value="#{codigoDdd.codigo}" />
                </p:column>

                <p:column headerText="Localidade" sortBy="#{codigoDdd.localidade}" filterBy="#{codigoDdd.localidade}">
                    <h:outputText value="#{codigoDdd.localidade}" />
                </p:column>

                <p:column headerText="Município" sortBy="#{codigoDdd.municipio}" filterBy="#{codigoDdd.municipio}">
                    <h:outputText value="#{codigoDdd.municipio}" />
                </p:column>

                <p:column headerText="Sigla" sortBy="#{codigoDdd.sigla}" filterBy="#{codigoDdd.sigla}">
                    <h:outputText value="#{codigoDdd.sigla}" />
                </p:column>

                <p:column headerText="U.F." sortBy="#{codigoDdd.codUf.codUf}" filterBy="#{codigoDdd.codUf.codUf}">
                    <h:outputText value="#{codigoDdd.codUf.codUf}" />
                </p:column>
            </p:dataTable>

            <p:dialog id="dialog" header="Detalhes D.D.D." widgetVar="codigoDddDialog" resizable="true"
                      width="700" showEffect="explode" hideEffect="explode">
                <p:panel id="panel">
                    <h:panelGrid id="display" columns="2" style="margin-bottom:50px" cellpadding="5">
                        <h:outputText value="Código D.D.D.:" />
                        <p:inputText id="inDdd" value="#{codigoDddBean.selectedCodigoDdd.codigo}" 
                                     style="width:100px; font-weight:bold" required="true"
                                     onkeyup="javascript:maskIt(this,event,'#####',true)"/>

                        <h:outputText value="Localidade:" />
                        <p:inputText id="indscLocalidade" value="#{codigoDddBean.selectedCodigoDdd.localidade}" required="true" style="width:500px; font-weight:bold" />

                        <h:outputText value="Município:" />
                        <p:inputText id="indscMunicipio" value="#{codigoDddBean.selectedCodigoDdd.municipio}" required="true" style="width:500px; font-weight:bold" />

                        <h:outputText value="Sigla:" />
                        <p:inputText id="indscSigla" value="#{codigoDddBean.selectedCodigoDdd.sigla}" style="width:100px; font-weight:bold" />

                        <h:outputText value="U.F.:" />
                        <p:autoComplete id="acUf" value="#{codigoDddBean.selectedCodigoDdd.codUf.codUf}" required="true" 
                                        completeMethod="#{cidadeBean.complete}" style="width:50px; font-weight:bold" />
                    </h:panelGrid>
                    <p:commandButton value="Inserir" update="messages,panel,tabDdd,display" 
                                     actionListener="#{codigoDddBean.inserir}" oncomplete="codigoDddDialog.hide()" />

                    <p:commandButton value="Alterar" update="messages,panel,tabDdd,display" rendered="#{codigoDddBean.disable}" 
                                     actionListener="#{codigoDddBean.alterar}" oncomplete="codigoDddDialog.hide()" />

                    <p:commandButton value="Excluir" onclick="confirmation.show()" type="button" rendered="#{codigoDddBean.disable}" />
                </p:panel>
            </p:dialog>

            <p:confirmDialog message="Confirma a Exclusão desse D.D.D.?"
                             showEffect="bounce" hideEffect="explode"
                             header="Exclusão do D.D.D." severity="alert" widgetVar="confirmation">

                <p:commandButton value="Sim" update="messages,panel,tabDdd,display" oncomplete="confirmation.hide(),codigoDddDialog.hide()"
                                 actionListener="#{codigoDddBean.excluir}" />
                <p:commandButton value="Não" onclick="confirmation.hide()" type="button" />

            </p:confirmDialog>

        </h:form>
    </ui:define>
</ui:composition>